.home {
  margin: 0 auto;
}

.header {
  width: 100%;
  height: 155px;
  background-image: url("../img/home/header-banner.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  box-shadow: inset 0 45px 55px rgba(0, 0, 0, 0.3);

  .header-logo {
    position: absolute;
    bottom: 0;

    img {
      width: 162px;
      margin-left: 64px;
    }
  }
}

.header-item-box {
  width: 100%;
  height: 110px;
  // padding: 0 140px;
  box-sizing: border-box;
  display: flex;
  align-items: center;

  .header-icon {
    display: flex;
    font-size: 14px;

    .iconfont {
      font-size: 46px;
      color: #f07775;
    }

    div {
      display: flex;
      flex-direction: column;
      margin-right: 24px;
      align-items: center;
      gap: 5px;
    }
  }

  .header-item {
    display: flex;
    align-items: center;
    width: 100%;
    color: #61666d;

    .header-item-left {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(11, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 10px;
      font-size: 14px;
      padding-right: 30px;
      grid-auto-flow: row;
      border-right: 1px solid #e3e5e7;

      & > a {
        padding: 0px;
        letter-spacing: 2px;
        line-height: 26px;
        height: 26px;
        border: 1px solid #f1f2f3;
        background-color: #f6f7f8;
        border-radius: 6px;
        text-align: center;
        // min-width: 74px;
        white-space: nowrap;
      }
    }

    .header-item-right {
      width: 240px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-row-gap: 10px;
      font-size: 14px;
      flex-shrink: 0;
      justify-items: center;

      & > a {
        padding: 0px;
        height: 28px;
        line-height: 28px;
      }

      .iconfont {
        vertical-align: middle;
        margin-right: 4px;
      }
    }
  }
}

// .login-content-box {
//   width: 100vw;
//   height: 100vh;
//   position: fixed;
//   top: 0;
//   left: 0;
//   z-index: 3;
//   background-color: rgba(0, 0, 0, 0.5);

//   .login-content {
//     .center;
//     width: 820px;
//     min-height: 430px;
//     background: #fff;
//     border-radius: 8px;
//     padding: 65px 65px 29px 92px;
//     box-sizing: border-box;
//     background-image: url(../img/home/login-bag-left.png),
//       url(../img/home/login-bag-right.png);
//     background-position: 0 100%, 100% 100%;
//     background-repeat: no-repeat, no-repeat;
//     background-size: 14%;
//     color: #505050;

//     .login-content-close {
//       position: absolute;
//       right: 20px;
//       top: 20px;
//       span {
//         cursor: pointer;
//         font-size: 30px;
//       }
//     }

//     .login-plane {
//       display: flex;
//       justify-content: space-between;

//       .login-plane-left {
//         display: flex;
//         row-gap: 30px;
//         flex-direction: column;
//         align-items: center;
//         font-size: 13px;
//         justify-content: space-between;
//         .qrcode-tip {
//           font-size: 18px;
//         }
//         .login-qrcode {
//           background-image: url(../img/home/login-qrcode-bag.png);
//           height: 173px;
//           width: 330px;
//           background-size: 100% 100%;
//           position: absolute;
//           left: 0px;
//           top: 114px;
//         }

//         .login-qrcode-text {
//           p {
//             margin-bottom: 5px;
//           }
//           span {
//             color: #00aeec;
//             margin: 0 5px;
//           }
//         }
//       }

//       .login-line {
//         border: 0.5px solid #e3e5e7;
//       }

//       .login-plane-right {
//         width: 400px;
//         display: flex;
//         flex-direction: column;
//         align-items: center;
//         row-gap: 20px;

//         .login-plane-title {
//           font-size: 18px;
//           display: flex;
//           gap: 40px;
//           cursor: pointer;
//           div {
//             line-height: 20px;
//           }
//           .line {
//             border-left: 1px solid #e3e5e7;
//             cursor: default;
//           }
//           .login-type-active {
//             color: #00aeec;
//           }
//         }

//         input:focus {
//           outline: none;
//           border: none;
//         }

//         .login-text {
//           width: inherit;
//           border: 1px solid #e3e5e7;
//           border-top-left-radius: 10px;
//           border-top-right-radius: 10px;
//           border-bottom-left-radius: 10px;
//           border-bottom-right-radius: 10px;

//           .line {
//             border-top: 1px solid #e3e5e7;
//           }

//           .input-box {
//             box-sizing: border-box;
//             padding: 12px 20px;
//             display: flex;
//             column-gap: 12px;

//             .type-label {
//               width: 50px;
//             }

//             .get-code-lable {
//               border-left: 1px solid #e3e5e7;
//               padding-left: 20px;
//               cursor: pointer;
//             }

//             input {
//               flex: 1;
//               font-size: 14px;
//               line-height: 20px;
//               border: 0;
//             }

//             .forget-lable {
//               color: #00aeec;
//             }
//           }
//         }

//         .login-button {
//           display: flex;
//           width: 400px;
//           justify-content: space-between;
//           div {
//             height: 40px;
//             width: 194px;
//             border-radius: 8px;
//             text-align: center;
//             line-height: 40px;
//             border: 1px solid #e3e5e7;
//             box-sizing: border-box;
//             cursor: pointer;
//           }

//           .register-but {
//             background-color: #ffffff;
//           }

//           .login-but {
//             color: #ffffff;
//             background-color: #00aeec;
//           }

//           .login-but:hover {
//             background-color: rgba(0, 174, 236, 0.9);
//           }
//         }

//         .phone {
//           justify-content: center;
//         }

//         .orther-login-tip {
//           font-size: 13px;
//         }

//         .orther-login-link {
//           width: 400px;
//           display: flex;
//           font-size: 13px;
//           justify-content: space-around;

//           .iconfont {
//             margin-right: 6px;
//             font-size: 30px;
//             vertical-align: middle;
//           }

//           .icon-weixin {
//             color: #28c445;
//           }

//           .icon-weibo {
//             color: #ea5d5c;
//           }

//           .icon-qq {
//             color: #68a5e1;
//           }
//         }
//       }
//     }

//     .login-tip {
//       font-size: 13px;
//       text-align: center;
//       position: absolute;
//       bottom: 20px;
//       left: 50%;
//       transform: translate(-50%);
//       span {
//         color: #00aeec;
//       }
//     }
//   }
// }
